<script setup lang="ts">
import { ref, defineEmits, computed, watch, onMounted } from 'vue';
import { useBooleanStore } from '@/store';
import { queryInventoryIn } from '@/api/inventory-management';

const emit = defineEmits(['updateArray']);
const booleanStore = useBooleanStore();
const workbinCode = ref('');
const mProductNumber = ref('');
const itemCode = ref('');
const qualityCode = ref('');
const barcode = ref('');
// const aoCode = ref<string>('');
// const startDate = ref<string>('');
// const endDate = ref<string>('');
const pageSize = ref(10);
const pageNumber = ref(1);
// 发送搜索数据
const flowQueryData = ref({
  searchParams: computed(() => ({
    // aoCode: aoCode.value,
    barcode: barcode.value,
    // endDate: endDate.value,
    itemCode: itemCode.value,
    mProductNumber: mProductNumber.value,
    qualityCode: qualityCode.value,
    // startDate: startDate.value,
    workbinCode: workbinCode.value,
  })),
  pageParameter: computed(() => ({
    rows: pageSize.value,
    page: pageNumber.value,
  })),
});
// 表格数据

async function handleSearch() {
  const newData = await queryInventoryIn(flowQueryData.value);
  emit('updateArray', newData);
}
// 重置
function reset() {
  workbinCode.value = '';
  mProductNumber.value = '';
  itemCode.value = '';
  qualityCode.value = '';
  barcode.value = '';
  // aoCode.value = '';
  // startDate.value = '';
  // endDate.value = '';
  pageNumber.value = 1;
  handleSearch();
}

// 监听分页
watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
  if (booleanStore.num5 === 27) {
    pageNumber.value = booleanStore.pageNum;
    pageSize.value = booleanStore.pageSize;
    handleSearch();
  }
});
onMounted(() => {
  handleSearch();
});
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="workbinCode"
          placeholder="缓存箱编号"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="mProductNumber"
          placeholder="成品型号"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="barcode"
          placeholder="条码"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="itemCode"
          placeholder="图号"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
  </a-row>
  <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="qualityCode"
          placeholder="质量编号"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
    <!-- <a-col :span="6">
      <div>
        <a-input
          v-model="aoCode"
          placeholder="AO编号"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
    <a-col :span="6">
      <a-date-picker
        v-model="startDate"
        style="width: 100%"
        placeholder="开始日期"
        size="large"
        allow-clear
      />
    </a-col>
    <a-col :span="6">
      <a-date-picker
        v-model="endDate"
        style="width: 100%"
        placeholder="截止日期"
        size="large"
        allow-clear
      />
    </a-col> -->
    <a-col :span="6">
      <a-button type="primary" size="large" @click="handleSearch"
        >查询</a-button
      >
      <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
    </a-col>
  </a-row>
  <!-- <div class="btn-group">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
  </div> -->
</template>

<style scoped>
.grid-demo {
  margin-top: 15px;
}
.btn-group {
  float: right;
  margin-top: 15px;
}

.btn-reset {
  margin-left: 10px;
}
</style>
